<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="mytag" uri="/WEB-INF/tag/tag.tld" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<mytag:head title="农产品溯源系统-设置" defineJs="/ncpsy/static/js/isQyLogin.js"
            defineCss="/ncpsy/static/css/tab-style.css"/>
<style>

    .producer-list-wrapper {
        width: 90%;
        margin: 20px auto;
        padding: 20px;
        border-radius: 2px;
        box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    }

    .producer-list {
        padding: 24px 0;
    }

    .producer-list > li {
        display: inline-block;
        margin: 10px 5px;
        /*background: #f5f5f5;*/
        padding: 8px 16px;
        position: relative;
        font-weight: bold;
        color: #555;
        border: 1px solid #bcbcbc;
        width: 120px;
    }
    .producer-list .active {
        background-color: #5fb878;
        color: #ffffff;
        border: 1px dashed #5fb878;
    }
    .producer-list > .active::before {
        background: #ffffff;
        border: 2px solid #ffffff;
    }
</style>
<body>
<div class="producer-list-wrapper">
    <h2>出块节点治理</h2>
    <ul class="producer-list">
        <li></li>
    </ul>
    <div class="vote-wrapper">

        <button class="layui-btn">节点投票提案</button>
        <br>
        <small style="display: inline-block;margin-top: 5px">注：用于管理当前网络出块节点，<b>仅限管理员开启投票提案</b></small>
    </div>
</div>





<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script src="./public.js"></script>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>


<script>
    getProducerList();
    // 从后台获取节点列表
    function getProducerList() {
        $.ajax({
            type:'get',
            url: 'http://128.1.136.87:8090/',
            success(res) {
                renderProducers(eval(res))
            },
            error(err) {
                console.log(err)
            }
        })
    }
    // 渲染节点列表
    function renderProducers(data) {
        const producerList = $('.producer-list');
        producerList.empty();
        for (let i = 0, len = data.length; i < len; i++) {
            const $li = $('<li>'+data[i].owner+'</li>');
            producerList.append($li)
        }
    }
    /*

            // 获取节点列表，并根据blockinfo的出块节点修改节点状态
            function getProducerEL(producer) {
                const list = $('.producer-list').find('li');
                for (let i = 0, len = list.length; i < len; i++) {
                    if (list[i].innerText === producer) {
                        list[i].className = 'active'
                    } else {
                        list[i].className = ''
                    }
                }
             }
            // block item
            let item = {"timestamp":"2020/5/22 下午1:39:17",
                "producer":"four.cartel",
                "confirmed":0,
                "previous":"0584cda925ff13cbc765c9cb0c31aee3d3cc07f5590d7cdf768799c38fb3b052",
                "transaction_mroot":"0000000000000000000000000000000000000000000000000000000000000000",
                "action_mroot":"0eea0176742af40918b93a6f5ec6944f27c4a4644cdab48ae15e7e4d239da832",
                "schedule_version":392,
                "new_producers":null,
                "producer_signature":"SIG_K1_KhUU1E1zmMD9ZETi293WZ8f29J7CNChkBj2WbAnYTtXh4tWyZ625L2sJ8fmZoJH2ruR4xLNVVCRDTDLrTfBrKMi2tmc6hL",
                "transactions":[],
                "transaction_num": 0,
                "id":"0584cdaa3b0d36ed50840d53b456d173c8ba4101b37e09408e663b320876c1e1",
                "block_num":92589482,
                "ref_block_prefix":1393394768,
                "ncpName": "",
                "ncpId": ""
            };

            let blockList = []
            // default chain info
            let testChain = {
                "head_block_num":92589482,
                "fork_db_head_block_num":92589482,
                "chain_id":"e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473",
                "head_block_time":"2020-05-22T05:39:17.500",
                "virtual_block_net_limit":524288000,
                "virtual_block_cpu_limit":500000000,
                "last_irreversible_block_num":92589146,
                "server_version":"b39b6bd3",
                "block_cpu_limit":499990,
                "head_block_producer":"four.cartel",
                "fork_db_head_block_id":"0584cdaa3b0d36ed50840d53b456d173c8ba4101b37e09408e663b320876c1e1",
                "last_irreversible_block_id":"0584cc5aa64c232f9b55684329addfd096e8028643841aaf75fa07e6431030f7",
                "block_net_limit":524288,
                "head_block_id":"0584cdaa3b0d36ed50840d53b456d173c8ba4101b37e09408e663b320876c1e1",
                "server_full_version_string":"v2.0.4-b39b6bd3c74ff47fc53fa80aafa2c1941ba82879",
                "server_version_string":"v2.0.4"
            };
            let tableNcp, form;

            layui.use(['table', 'laypage', 'layer', 'form'], function () {
                var table = layui.table;

                //渲染表格
                tableNcp = table.render({
                    elem: '#list',
                    id: 'idTest',
                    // url: '/ncpsy/handle/product/list/'+qyid,
                    // where: ncp,
                    data: blockList,
                    page: true,
                    cols: [[
                        {field: 'block_num', title: '区块高度', sort: true, fixed: 'left'},
                        {field: 'timestamp', title: '时间戳'},
                        {field: 'producer', title: '出块节点'},
                        {field: 'ncpName', title: '农产品名称'},
                      {field: 'ncpId', title: '农产品ID'}
                    ]]
                });

                form = layui.form;
                // 初次渲染表单
                getChainInfo();
            });

            // 每隔1秒获取一次区块数据和chain info 数据
            setInterval(function () {
                getChainInfo();
                getBlock();
            }, 1000)

            // 每隔7秒获取一次农产品数据
            setInterval(function() {
              getNCPInfo()
            }, 7000)

            // 获取区块信息
            let tempBlockNum;
            function getBlock() {
                if (tempBlockNum == testChain.head_block_num) {
                    return;
                }
                $.ajax({
                    url:'http://192.168.1.30:8888/ncpsy/handle/get_block/'+testChain.head_block_num,
                    type:'post',
                    headers: {
                        "Content-Type": "application/json;charset=utf-8;"
                    },
                    success:function (res) {
                        tempBlockNum = testChain.head_block_num;
                        res.transaction_num = res.transactions.length;
                        res.timestamp = utc2beijing(res.timestamp);
                        updateBlock(res);
                        // console.log(res)
                    },
                    error(err) {
                        console.log(err)
                    }
                });
            }
            // 更新区块信息
            function updateBlock(data) {
                blockList.unshift(data);
                // if (blockList.length > 6) {
                //     blockList.pop()
                // }
                tableNcp.reload({
                    id: 'idTest',
                    data: blockList
                });
            }

            // 获取chain info
            function getChainInfo() {
                $.ajax({
                    url:'http://192.168.1.30:8888/ncpsy/handle/get_info',
                    type:'get',
                    headers: {
                        "Content-Type": "application/json;charset=utf-8;"
                    },
                    success:function (res) {
                        res.head_block_time = utc2beijing(res.head_block_time);
                        testChain = res;
                        updateForm(testChain);
                        getProducerEL(res.head_block_producer)
                    },
                    error(err) {
                        console.log(err)
                    }
                });
            }

            // 获取农产品上链信息
            function getNCPInfo() {
              $.ajax({
                url:'http://192.168.1.30:8888/ncpsy/handle/getNcpInfo',
                type:'get',
                headers: {
                  "Content-Type": "application/json;charset=utf-8;"
                },
                success:function (res) {
                  if (res) {
                    blockList[0].ncpId = res.ncpid
                    blockList[0].ncpName = res.ncpmc
                  }

                },
                error(err) {
                  console.log(err)
                }
              });
            }
            // 重新渲染chain info
            function updateForm (data) {
                form.val("chainInfo", data);
            }
    */

</script>
</body>
</html>